/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import { getInnSmsdetail } from '@/services/yz/smsMonitor';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Drawer, Typography } from 'antd';
import React, { useState } from 'react';
import { useSelector } from 'umi';
import type { ConnectState } from '@/models/connect';

const { Text } = Typography;

const SmsDrawer: React.FC<{ data: Record<string, string> }> = (props) => {
  const [visible, setVisible] = useState<boolean>(false);
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const {
    data: { inn_name = '', phone = '', cm_id },
  } = props;

  const onClose = () => {
    setVisible(false);
  };
  const onOpen = () => {
    setVisible(true);
  };

  const columns: ProColumns<Record<string, string>>[] = [
    {
      title: '',
      hideInTable: true,
      dataIndex: 'brand',
      valueType: 'select',
      initialValue: '',
      valueEnum: {
        '': { text: '全部品牌' },
        yt: { text: '圆通' },
        yd: { text: '韵达' },
        ht: { text: '汇通' },
        tt: { text: '天天' },
        sto: { text: '申通' },
        zt: { text: '中通' },
      },
      fieldProps: {
        allowClear: false,
      },
    },
    {
      title: '日期',
      dataIndex: 'date',
      align: 'center',
      search: false,
    },
    {
      title: '入库数量',
      dataIndex: 'cnt',
      align: 'center',
      search: false,
    },
    {
      title: '短信/云呼占比',
      dataIndex: 'percent',
      align: 'center',
      search: false,
      render: (value) => <Text type='danger'>{value}%</Text>,
    },
  ];

  const requestTableData = async (values: Record<string, string>) => {
    const { code, data } = await getInnSmsdetail({
      cm_id,
      ...values,
    });
    if (code == 0) {
      const list = (Array.isArray(data) ? data : []).map((item, index) => ({
        ...item,
        id: item.date + index,
      }));
      return { data: list, total: list.length };
    } else {
      return { data: [], total: 0 };
    }
  };

  return (
    <>
      <div onClick={onOpen}>{props.children}</div>
      <Drawer
        visible={visible}
        onClose={onClose}
        width={winSize == 'xs' ? 300 : 600}
        destroyOnClose
        title={`${inn_name} ${phone}`}
      >
        <ProTable<Record<string, string>>
          rowKey='id'
          request={requestTableData}
          columns={columns}
          options={false}
          pagination={{
            pageSize: 15,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          scroll={{ x: winSize == 'xs' ? 300 : 500 }}
          search={{
            collapsed: false,
            collapseRender: false,
            span: winSize == 'xs' ? 24 : 12,
          }}
        />
      </Drawer>
    </>
  );
};

export default SmsDrawer;
